<template>
	<view class="page-container">
		<view class="success-section">
			<uni-icons type="checkmarkempty" size="80" color="#07c160" />
			<text class="success-text">预订成功</text>
		</view>
		<view class="order-card">
			<view class="hotel-info">
				<text class="hotel-name">{{info.name}}</text>
				<text class="room-type">{{info.bedInfo}}</text>
			</view>
			<view class="date-info">
				<view class="check-in">
					<text class="label">入住</text>
					<text class="date">{{info.start}}</text>
					<text class="time">14:00后</text>
				</view>
				<text class="date-separator">-</text>
				<view class="check-out">
					<text class="label">离店</text>
					<text class="date">{{info.end}}</text>
					<text class="time">12:00前</text>
				</view>
			</view>
			<view class="room-count">
				<text class="label">房间数量</text>
				<text class="value">{{info.roomCount}}间</text>
			</view>
			<view class="total-amount">
				<text class="label">订单总额</text>
				<text class="value">¥{{Number(info.price).toFixed(2)}}</text>
			</view>
		</view>
		<view class="guest-card">
			<view class="card-title">预订人信息</view>
			<view class="info-item">
				<text class="label">姓名</text>
				<text class="value">{{info.userName}}</text>
			</view>
			<view class="info-item">
				<text class="label">手机号</text>
				<text class="value">{{info.phone}}</text>
			</view>
			<view class="info-item">
				<text class="label">备注</text>
				<text class="value">{{info.remark}}</text>
			</view>
		</view>
		<view class="notice">
			<view class="notice-title">温馨提示</view>
			<text class="notice-item">• 订单确认后，如需退改请至少提前24小时告知</text>
			<text class="notice-item">• 入住需要携带身份证原件办理登记</text>
			<text class="notice-item">• 如有疑问，请拨打24小时服务电话：400-888-8888</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				start: '',
				end: '',
				info: {},
			}
		},
		
		onLoad(options) {
			this.info = JSON.parse(options.info)
		},
	}
</script>
<style>
	page {
		height: 100%;
	}

	.page-container {
		min-height: 100%;
		padding: 40rpx 30rpx;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.success-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.success-text {
		margin-top: 20rpx;
		font-size: 32px;
		color: #07c160;
		font-weight: 500;
	}

	.order-card,
	.guest-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.hotel-info {
		margin-bottom: 30rpx;
	}

	.hotel-name {
		display: block;
		font-size: 18px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.room-type {
		font-size: 14px;
		color: #666666;
	}

	.date-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.check-in,
	.check-out {
		flex: 1;
	}

	.date-separator {
		margin: 0 20rpx;
		color: #999999;
	}

	.date {
		display: block;
		font-size: 16px;
		color: #333333;
		margin: 8rpx 0;
	}

	.time {
		font-size: 12px;
		color: #999999;
	}

	.room-count,
	.total-amount,
	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 14px;
		color: #666666;
	}

	.value {
		font-size: 14px;
		color: #333333;
	}

	.card-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.order-number {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.number-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.notice {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 60rpx;
	}

	.notice-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.notice-item {
		display: block;
		font-size: 12px;
		color: #999999;
		line-height: 1.6;
		margin-bottom: 10rpx;
	}
</style>